<template>
  <div :id="echartId" class="echart-box"></div>
</template>

<script lang="ts" setup>
// 例如：import 《组件名称》 from '《组件路径》';
import { defineComponent, markRaw, onMounted, onUnmounted, reactive, toRefs } from 'vue';
import * as ec from 'echarts';

const props = defineProps({
  echartId: { type: String },
  title: { type: String },
  nameTitle: { type: String },
  lineData: { type: Object },
  legendShow: { type: Boolean, default: true },
});
// 这里存放数据
const propData = markRaw(props);
const data: any = reactive({
  myChart: '',
  colorList: [
    '#5f49b0',
    '#7b2fd5',
    '#354cc2',
    '#08926a',
    '#c23d47',
    '#d12987',
    '#e6ad06',
    '#d07022',
  ],
});

const drwaEchart = () => {
  if(data.myChart)ec.dispose(data.myChart)
  const chartDom: any = document.getElementById(propData.echartId);
  data.myChart = markRaw(ec.init(chartDom));
  let option = {
    legend: {
      show: propData.legendShow,
      data: ['分月货流量', '分月客流量'],
      right: '0%',
      top: '10%',
      padding: [0, 30, 0, 30],
      textStyle: {
        color: 'rgba(255, 255, 255, 0.80)',
      },
      icon: 'rect',
      //   itemStyle:{
      //     color:'rgba(7, 131, 250, 1)'
      //   },
      itemWidth: 16,
      itemHeight: 6,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
    },
    grid: {
      left: '15%',
      bottom: '18%',
      right: '5%',
      top: '20%',
    },
    xAxis: {
      type: 'category',
      data: propData.lineData.xData,
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(53, 65, 77, 1)',
          width: 1,
        },
      },
      axisLabel: {
        padding: [6, 0, 0, 0],
        // textStyle: {
        //   color: '#595959',
        //   fontSize: '14',
        // },
        textStyle: {
          color: 'rgba(209, 239, 255, 0.65)',
          fontSize: '12',
        },
        lineHeight: 18,
        interval: 0,
        formatter: function (value) {
          var str = '';
          var num = 5; //每行显示字数
          var valLength = value.length; //该项x轴字数
          var rowNum = Math.ceil(valLength / num); // 行数

          if (rowNum > 1) {
            for (var i = 0; i < rowNum; i++) {
              var temp = '';
              var start = i * num;
              var end = start + num;

              temp = value.substring(start, end) + '\n';
              str += temp;
            }
            return str;
          } else {
            return value;
          }
        },
      },
      axisTick: {
        show: true,
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: 'value',
      name: propData.title,
      minInterval: 1, // 只显示整数
      splitLine: {
        //网格线
        lineStyle: {
          color: 'rgba(53, 65, 77, 1)',
          type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
        },
        show: true, //隐藏或显示
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.80)',
        },
        textStyle: {
          color: 'rgba(193, 233, 255, 0.8)',
          fontSize: '12',
        },
      },
    },
    series: [
      {
        name: propData.nameTitle || '分月货流量',
        showBackground: true,
        backgroundStyle: {
          borderWidth: 16,
          borderColor: 'rgba(108, 130, 151, 0.1)',
          color: 'rgba(108, 130, 151, 0)',
        },
        data: propData.lineData.hllData,
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          color:'#ffffff'
        },
        itemStyle: {
          color: new ec.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgba(0, 132, 255,0)' },
            { offset: 0.1, color: 'rgba(0, 132, 255,1)' },
          ]),
        },
        barWidth: 16,
      },
    ],
  };
  option && data.myChart.setOption(option);
};
onMounted(() => {
  // drwaEchart();
  window.addEventListener('resize', (e) => {
    data.myChart && data.myChart.resize();
  });
});
onUnmounted(() => {
  window.removeEventListener('resize', drwaEchart);
});

defineExpose({
  drwaEchart,
});
</script>

<style scoped lang="less">
.echart-box {
  height: 250px;
  width: 100%;
}
</style>
